<template>
  <el-header class="right-header" height="max-content">
    <Header>
      <template #leftContent>
        <el-tabs
          v-model="activeName"
          class="w-full demo-tabs"
          @click="handleClick(activeName)"
        >
          <el-tab-pane :label="$t('用户总览')" name="1"> </el-tab-pane>
          <el-tab-pane :label="$t('交易订单')" name="2"></el-tab-pane>
          <el-tab-pane :label="$t('待审核')" name="3">
            <template #label>
              <span class="custom-tabs-label">
                <el-badge
                  :value="userOverview.awaiting_review"
                  :max="99"
                  class="item"
                  v-if="userOverview.awaiting_review > 0"
                >
                  <span>{{ $t("待审核") }}</span>
                </el-badge>
                <span v-else>{{ $t("待审核") }}</span>
              </span>
            </template>
          </el-tab-pane>
        </el-tabs>
      </template>
    </Header>
  </el-header>
  <div class="container-box">
    <UserList
      :userOverview="userOverview"
      v-if="activeName == 1 && !isShowDetail"
      @showDetail="showDetail"
    />
    <DetailPage
      v-if="activeName == 1 && isShowDetail"
      @closeDetail="closeDetail"
      :userInfo="userInfo"
    />
    <Records v-if="activeName == 2" />
    <Records v-if="activeName == 3" :isNoReview="true" />
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { getUserOverviewApi } from "@/api/account/index";
import { useI18n } from "vue-i18n";
import UserList from "./components/userList.vue";
import Records from "./components/records.vue";
import DetailPage from "./components/detailPage.vue";
const { t } = useI18n();

const activeName = ref("1");

const isShowDetail = ref(false);
const userInfo = ref({});
const showDetail = (data) => {
  isShowDetail.value = true;
  userInfo.value = data;
};
const closeDetail = () => {
  isShowDetail.value = false;
};

const userOverview = ref({});
const getBalance = async () => {
  const res = await getUserOverviewApi();
  userOverview.value = res;
};
getBalance();
onMounted(() => {
  if (localStorage.getItem("isTrue")) {
    activeName.value = "3";
    localStorage.removeItem("isTrue");
  }
});

const handleClick = (name) => {
  isShowDetail.value = false;
};
</script>
